<template>
    <div id="header">
        <el-header>
            <router-link to="/">
                <img src="../assets/logo.png" style="width: 20%">
            </router-link>
        </el-header>
        <div id="menu">
            <div>
<!--                <a href="javascript:window.opener=null;window.open('','_self');window.close();" ><el-button :class="{active:!isActive}" icon="el-icon-arrow-left" >返 回</el-button></a>-->
                <a href="javascript:window.opener=null;window.close();" ><el-button :class="{active:!isActive}" icon="el-icon-arrow-left" style="border: none">返 回</el-button></a>
                <img :src="avatar" style="width: 55px;height: 55px;margin: -20px 10px -20px 50px">
                <span :class="{active:isActive}">{{collegeName}}</span >
                <div style="float: right">
                    <img src="../assets/huomiao-hash.png" style="width: 15px;height: 15px;margin: -25px -13px 0px 50px">
                    <span >人气值: {{this.$store.getters.GET_COLLEGE.popularityValue}}</span><br/>

                    <el-popover
                            placement="bottom"
                            title="温馨提示"
                            width="240"
                            trigger="hover"
                            content="本平台预测的录取信息仅供志愿参考  具体的数据请以学校官网或考试院公布为准">
                        <el-button slot="reference" class="predictionNextYearBtn" icon="el-icon-guide" @click="predictionNextYearVisible = true">2021年录取预测</el-button >
                    </el-popover>

                </div>

            </div>
        </div>

        <!--    predictionNextYearVisible -->
        <el-dialog title="2021年各省录取预测" :visible.sync="predictionNextYearVisible" modal="flase">
            <div>
                <span>所在省份 ></span>
                <span>
                    <el-select v-model="province" placeholder="所在省份" >
                        <el-option v-for="province in provinces" :value=province>{{province}}</el-option>
                    </el-select>
                </span>
                <span>
                    <el-button @click="predictionNextYear()" >预 测 </el-button>
                </span>
            </div>

            <div class="predictionNextYearList" v-show="predictionNextYearList.length != 0" style="margin-top: 20px">
                <el-divider content-position="center" ><i class="el-icon-finished"></i> 预测结果列表</el-divider>
                <div class="List" >
                    <el-table :data="predictionNextYearList" stripe style="width: 93%;margin: 32px">
                        <el-table-column type="index" label="序号" width="100"></el-table-column>
                        <el-table-column prop="province" label="录取省份" width="150"></el-table-column>
                        <el-table-column prop="year" label="录取年份" width="150"></el-table-column>
                        <el-table-column prop="examType" label="录取类型" width="150"></el-table-column>
                        <el-table-column prop="lowestScore" label="预测录取最低分" width="150"></el-table-column>
                        <el-table-column prop="lowestRank" label="预测录取最低排位" width="150"></el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import college_admit from "../api/college_admit";

    export default {
        name: "Header",
        data(){
            return{
                isActive:true,
                collegeName:'',
                avatar:'',
                provinces:["北京","天津","河北","河南","山东","山西","陕西","内蒙古","辽宁","吉林","黑龙江","上海","江苏","安徽","江西","湖北","湖南",
                    "重庆","四川","贵州","云南", "广东","广西","福建","甘肃","宁夏","新疆","西藏","海南","浙江","青海"],
                province:null,
                //predictionNextYear
                predictionNextYearVisible: false,
                predictionNextYearList:[]
            }
        },
        created() {
            this.collegeName = this.$store.getters.GET_COLLEGE.collegeName
            this.avatar = this.$store.getters.GET_COLLEGE.avatar
            this.$notify.success({title: '欢迎来到'+this.collegeName, message: '愿你能找到自己心仪的专业', duration: 6000});
        },
        methods:{
            //2021年录取预测
            predictionNextYear(){
                //验证
                if (this.province === null){
                    this.$notify.warning({title: '信息输入不完整', message: '请输入完整的信息，再点击预测按钮', duration: 2500});
                }else{
                    //请求
                    // console.log(this.province)
                    let vm = this
                    college_admit.predictionNextYear(vm.collegeName,vm.province).then(function (response) {
                        // console.log(response)
                        if (response.data.code === 200){
                            // console.log(response.data.data)
                            vm.predictionNextYearList = response.data.data
                            vm.$notify.success({title: '已成功预测', message: '请查看预测结果列表', duration: 2500});
                        }else{
                            if (response.data.code === 201){
                                vm.predictionNextYearList = []
                                vm.$notify.info({title: '数据不足，暂时预测不了！', message: '请重新选择其他省份预测', duration: 2500});
                            }

                        }
                    })
                }

            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: rgb(238, 245, 249);
        text-align: center;
        height: 70px !important;
    }
    #menu{
        padding: 40px 40px 10px 0;
        text-align: left;
        background-color: white;
    }
    .el-button,span{
        font-family: 华文楷体;
        font-size: 20px;
        color: #555b5c;
        margin: 30px;

    }
    .el-button:hover{
        font-size: 21px;
        color: #5dabf7;
    }
    #header{
        margin: 0 100px;
    }
    .active{
        font-size: 25px;
        font-weight: 900;
        color: #5dabf7;
    }
    .predictionNextYearBtn{
        border: #cfecc1 solid 1px !important;
    }
    .el-divider__text{
        color: #5dabf7;
    }
</style>